<template>
  <div class="app-container" style="overflow: scroll;" v-loading="loading">
    <el-form :model="queryParams" ref="queryRef" :inline="true" :rules="rules">
          <el-form-item label="时间" prop="dataTime" label-width="40px">
            <WeekTimePicker type="date" :options="disabledOptions" v-model="queryParams.dataTime" :clearable="false" style="width: 130px"/>
          </el-form-item>

          <el-form-item label="设备基准">
            <el-radio-group v-model="queryParams.selectedEpt" @change="changeVal">
              <el-radio label="设备群">设备群</el-radio>
              <el-radio label="设备线">设备线</el-radio>
            </el-radio-group>
            <el-button style="margin-left: 20px;" type="primary" icon="Search" @click="getQueryData" v-if="!isShow">查询</el-button>
          </el-form-item>

          <el-form-item label="设备ID" prop="machineId" label-width="60px" v-if="isShow">
            <el-select v-model="queryParams.machineId" placeholder="请选择设备ID" style="width: 150px">
              <el-option
                  v-for="dict in machineIdOptions"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
              />
            </el-select>

            <el-button style="margin-left: 10px;" type="primary" icon="Search" @click="getQueryData">查询</el-button>
          </el-form-item>

    </el-form>
    <template v-for="(item, index) in dataAll">
      <div ref="myChart" id="chart" style="height: 260px; margin-bottom: 10px; border: 1px solid #aaa; border-radius: 4px;"></div>
      <t-ag-grid
        :style="{ height:'227px' }"
        style="margin-bottom: 10px;"
        class="add-margin"
        :column-defs="columns"
        :row-data="item"
        :row-buffer="20"
        :header-height="0"
        align="center"
        :getRowStyle ="getRowStyle"
        :defaultColDef = "{
          suppressMenu:true,
          flex: 1
        }"
        @cell-clicked="onCellClicked($event, index)"
        header-align="center"
      />

    </template>
  </div>
</template>

<script setup name="WarnTrend">
  import { getMachineAllListDiewa, queryTableData, columns, getTableData, chartOptios, _trendsTitle } from './config'
  import moment from 'moment'
  import * as echarts from 'echarts'
  import { useRouter } from 'vue-router'

  const router = useRouter()
  const { proxy } = getCurrentInstance()

  const queryParams = reactive({
    dataTime: moment().subtract(1, 'days').format('YYYY-MM-DD'),
    selectedEpt: '设备群',
    machineId: null
  })

  const rules = {
    machineId: [{ required: true, message: "请选择", trigger: "input" }]
  }

  const machineIdOptions = ref([])
  const isShow = ref(false)
  const loading = ref(false)

  const dataAll = ref([])
  const myChart = ref()

  const JumpDate = ref({}) // 对应的具体日期， 路由跳转所需

  const changeVal = (val) => {
    val === '设备线' ? isShow.value = true : isShow.value = false
  }

  let chart = null

  onActivated(() => {
    let { selectedEpt, dataTime, machineId } = history?.state
    if(selectedEpt && dataTime){
      if(selectedEpt === '设备线'){
        isShow.value = true
        queryParams.machineId = machineId
      } else {
        isShow.value = false
      }
      queryParams.dataTime = dataTime
      queryParams.selectedEpt = selectedEpt

      getQueryData()
    }
  })

  const disabledOptions = {
    disabledDate (date) {
      return date && date.valueOf() > moment().subtract(1, 'days').valueOf()
    }
  }

  const getQueryData = () => {
    proxy.$refs.queryRef.validate(valid => {
      if(valid){
        loading.value = true
        queryTableData({
          dataTime: moment(queryParams.dataTime).format('YYYY-MM-DD'),
          type: 'S',
          machineId: queryParams.selectedEpt === '设备群' ? `BY 叠瓦` : queryParams.machineId,
          referenceList: 'P,C,T'
        }).then((res) => {
          let { targetData, jump } = getTableData(res)
          dataAll.value = targetData
          JumpDate.value = jump

          loading.value = false

          nextTick(() => {
            myChart.value?.forEach((item, index) => {
              item.mark = item.innerText
              chart = echarts.init(item)
              const resizeObserver = new ResizeObserver((entries, b) => {
                if(echarts.getInstanceByDom(item)){
                  echarts.getInstanceByDom(item).resize()
                }
              })
              resizeObserver.observe(item)
              echarts.getInstanceByDom(item).setOption(chartOptios(dataAll.value, index, queryParams.selectedEpt === '设备群' ? '叠瓦焊机' : queryParams.machineId, moment(queryParams.dataTime).format("YYYY-MM-DD").slice(-5)), true)
            })
          })
        })
      }
    })
  }

  const getRowStyle = (params) => {
    if(params.rowIndex === 0){
      return {
        background: '#bdd7ee'
      }
    }
  }

  getMachineAllListDiewa().then((res) => {
    res.rows.forEach((item) => {
      machineIdOptions.value.push({
        label: item,
        value: item
      })
    })
  })

  const onCellClicked = ({ rowIndex, value, colDef }) => {
    if(!rowIndex && !_trendsTitle.includes(value) && value !== '平均值'){
      router.push({
        path: '/indexAnalyse/shiftManage/warnDetaile',
        state: {
          dataTime: JumpDate.value[colDef.field],
          selectedEpt: queryParams.selectedEpt,
          machineId: queryParams.selectedEpt === '设备线' ? queryParams.machineId : ''
        }
      })
    }
  }

</script>

